<template>
  <div style="height: 400px; overflow: auto" v-bind="containerBinds">
    <div v-bind="wrapperBinds">
      <div
        class="virtual-cell"
        v-for="(item, index) in showList"
        :key="index"
        v-bind="item.binds"
      >
        {{ item.value }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useVirtualList } from "../useVirtualList";

export default defineComponent({
  name: "App",
  setup() {
    let originList = ref([] as number[]);
    const {
      containerBinds,
      wrapperBinds,
      showList,
      reBuild,
      test,
      containerEl
    } = useVirtualList(originList, (i) => 20 + i, {
      elName: "test",
      offset: 2,
      cellOverflow: "hidden",
    });

    onMounted(() => {
      originList.value = Array(1000)
        .fill(0)
        .map((_, i) => i);
    });

    return {
      containerEl,
      showList,
      containerBinds,
      wrapperBinds,
      reBuild,
    };
  },
});
</script>


<style >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  margin: 40px;
}

.virtual-cell {
  border: 1px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

